<template>
  <nav class="nav-bar">
    <h4>{{ mainmesage.web_name }}</h4>
    <div class="nav-bar-right">


      <van-icon @click="GoSearchView" name="search" size="22" :style="{ margin: '0 20px 0 0' }" />


      <!-- 右侧弹出图标 -->
      <svg t="1679981869203" class="icon" viewBox="0 0 1462 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="6277" width="24" height="24" @click="showPopup">
        <path
          d="M1389.714286 146.285714H74.517943C37.215086 146.285714 2.896457 115.887543 0.2048 78.555429A73.142857 73.142857 0 0 1 73.142857 0h1315.0208c37.419886 0 71.767771 30.398171 74.430172 67.730286A73.142857 73.142857 0 0 1 1389.714286 146.285714z"
          fill="#54626C" p-id="6278"></path>
        <path
          d="M731.428571 585.142857H74.517943C37.215086 585.142857 2.896457 554.744686 0.2048 517.412571A73.142857 73.142857 0 0 1 73.142857 438.857143h656.735086c37.419886 0 71.738514 30.398171 74.430171 67.701028A73.142857 73.142857 0 0 1 731.428571 585.142857z"
          fill="#B8CCD7" p-id="6279"></path>
        <path
          d="M1389.714286 1024H74.517943C37.215086 1024 2.896457 993.601829 0.2048 956.298971A73.142857 73.142857 0 0 1 73.142857 877.714286h1315.0208c37.419886 0 71.738514 30.398171 74.430172 67.701028A73.142857 73.142857 0 0 1 1389.714286 1024z"
          fill="#54626C" p-id="6280"></path>
      </svg>
      <!-- 左侧弹出 -->
      <van-popup v-model:show="showLeft" close-on-popstate position="left" :style="{ width: '80%', height: '100%' }"
        safe-area-inset-bottom closeable>
        <nav-comp></nav-comp>
      </van-popup>
    </div>


  </nav>
</template>

<script setup>
import { ref, onMounted } from "vue";
import NavComp from "@/components/HomeView/NavComp.vue";
import { useStore } from "../../store";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
const router = useRouter()

const store = useStore()
let { showLeft, mainmesage, searchShow } = storeToRefs(store)


const showPopup = () => {
  // 点击修改为true
  showLeft.value = true;
  searchShow.value = false


};


const GoSearchView = () => {
  // console.log(searchVal.value);
  // searchShow.value = false
  router.replace({
    path: '/searchView',
  })
}
</script>

<style lang="scss">
.nav-bar {
  width: 100%;
  height: 3.125rem;
  padding: .75rem .75rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #fff;

  h4 {
    margin: 0;
  }

  .nav-bar-right {
    display: flex;
    align-items: center;

    .van-popover {
      .search-box {
        width: 6.25rem;
        height: 2.5rem;
        background-color: #fff;
      }
    }


  }
}
</style>